<template>
    <div class="tagBtns">
      <button :class="{active : itemClass === ''}" @click="changeClass('')">全部</button>
      <button :class="{active : itemClass === 'work'}" @click="changeClass('work')">工作</button>
      <button :class="{active : itemClass ==='study'}" @click="changeClass('study')">学习</button>
      <button :class="{active : itemClass === 'life'}" @click="changeClass('life')">生活</button>
    </div>
</template>

<script>
    export default {
        name: 'tags',
        data() {
            return {
                itemClass: ''
            }
        },
        methods: {
            changeClass(newClass) {
                this.itemClass = newClass;
                this.$emit('update-item-class', newClass)
            }
        },
        emits: ['update-item-class']
    }
</script>

<style scoped>
 .tagBtns {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-around;
  }
  .tagBtns button {
    margin: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    flex: 1;
  }
  .active {
    background-color: #4ca9cb;
    color: #fff;
    font-weight: bold;
  }
</style>